<script lang="ts">
import { defineComponent, ref, onUnmounted, onMounted } from 'vue'
import NavButton from '../components/NavButton.vue'
import { useLoginStore } from '../stores/login'
import router from '@/router'
export default defineComponent({
  components: {
    NavButton
  },
  setup() {
    const loginFlag = ref(true)

    const codeFlag = ref(false)

    const teleFlag = ref(false)

    const codeNull = ref(false)

    const successLogin = ref(false)

    const passwordFlag = ref(false)

    const outLoginFlag = ref(false)

    const isSend = ref(false)

    const phone = ref('')

    const password = ref('')

    const codeNum = ref('')

    const codeName = ref('获取验证码')

    const codeTime = ref(5)

    const reg = /^1[3-9]\d{9}$/

    const code = /^[0-9]{4}$/

    const passReg = /^[0-9]{6}$/

    const tokenValue = ref()

    let LoginStore = useLoginStore()

    // 登录数据
    let loginUserInfo: any = ref<any>({
      phone: '15016553149',
      password: '123456'
    })

    // 定义一个定时器
    const timer = ref()

    const timerTwo = ref()

    // 验证码登录判断
    const getCode = () => {
      if (!reg.test(phone.value)) {
        teleFlag.value = true

        timer.value = setTimeout(() => {
          teleFlag.value = false
        }, 1000)
        return
      }

      if (isSend.value) {
        return
      } else {
        isSend.value = true
        codeName.value = codeTime.value + 's后重新发送'
        timerTwo.value = setInterval(() => {
          codeTime.value--
          codeName.value = codeTime.value + 's后重新发送'
          if (codeTime.value < 0) {
            clearInterval(timerTwo.value)
            codeName.value = '重新发送验证码'
            codeTime.value = 5
            isSend.value = false
          }
        }, 1000)
      }
      codeFlag.value = true

      timer.value = setTimeout(() => {
        codeFlag.value = false
      }, 1000)
    }

    // 登录判断
    const login = (num: Number) => {
      if (num == 1) {
        if (!reg.test(phone.value)) {
          teleFlag.value = true

          timer.value = setTimeout(() => {
            teleFlag.value = false
          }, 1000)
          return
        }

        if (!code.test(codeNum.value)) {
          codeNull.value = true
          timer.value = setTimeout(() => {
            codeNull.value = false
          }, 1000)
          return
        }
      }

      if (num == 2) {
        if (!reg.test(phone.value)) {
          teleFlag.value = true

          timer.value = setTimeout(() => {
            teleFlag.value = false
          }, 1000)
          return
        }

        if (!passReg.test(password.value)) {
          passwordFlag.value = true
          console.log(password.value)
          timer.value = setTimeout(() => {
            passwordFlag.value = false
          }, 1000)
          return
        }
      }

      successLogin.value = true
      timer.value = setTimeout(() => {
        successLogin.value = false
      }, 1000)

      LoginStore.$patch((state) => {
        state.token = loginUserInfo._rawValue.phone
      })

      tokenValue.value = LoginStore.token
      console.log(tokenValue.value)
    }

    // 退出登录
    const outLogin = () => {
      LoginStore.$patch((state) => {
        state.token = null
        tokenValue.value = null
        outLoginFlag.value = false
      })
    }

    const goOrder = (path: any) => {
      router.push({
        path
      })
    }

    onUnmounted(() => {
      clearTimeout(timer.value)
      timer.value = ''
    })

    onMounted(() => {
      tokenValue.value = LoginStore.token
    })

    return {
      loginFlag,
      getCode,
      phone,
      codeFlag,
      teleFlag,
      login,
      codeNum,
      codeNull,
      successLogin,
      tokenValue,
      outLoginFlag,
      outLogin,
      goOrder,
      password,
      passwordFlag,
      isSend,
      codeName
    }
  }
})
</script>

<template>
  <!-- 请求登录界面 -->
  <div class="box" v-if="!tokenValue">
    <div class="login" v-if="loginFlag">
      <!-- 登录注册界面 -->
      <div class="logo"><img src="../../src/assets/img01/mihayou.png" alt="" /></div>
      <div class="login_box">
        <!-- 取消按钮 -->
        <div class="cancel" @click="loginFlag = false">
          <img src="../../src/assets/img01/quxiao.png" alt="" />
        </div>
        <van-tabs>
          <van-tab title="验证码登录">
            <!-- 验证码登录 -->
            <div class="code_content">
              <input type="text" placeholder="手机号注册/登录" class="tele" v-model="phone" />
              <div class="code">
                <input type="text" placeholder="验证码" v-model="codeNum" /><button
                  @click="getCode"
                  :disabled="isSend"
                >
                  {{ codeName }}
                </button>
              </div>

              <div class="login_btn" @click="login(1)">登录</div>
              <div class="register"><span>登录遇到问题?</span><span>立即注册</span></div>
              <p>
                未注册的手机验证后将自动登录。注册/登录即代表您同意并遵守<span
                  >《米哈游通行证用户服务协议》《米哈游通行证用户个人信息及隐私保护政策》</span
                >
              </p>
            </div>
          </van-tab>
          <van-tab title="密码登录">
            <!-- 密码登录 -->
            <div class="password_content">
              <input type="text" placeholder="手机号注册/登录" class="tele" v-model="phone" />
              <input type="password" placeholder="密码" class="code" v-model="password" />
              <div class="login_btn" @click="login(2)">登录</div>
              <div class="register"><span>登录遇到问题?</span><span>立即注册</span></div>
              <p>
                登录即代表您同意并遵守<span
                  >《米哈游通行证用户服务协议》《米哈游通行证用户个人信息及隐私保护政策》</span
                >
              </p>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <h1 class="title">个人中心</h1>
    <div class="content">
      <img src="../../src/assets/img01/newworld.webp" alt="" />
      <span>快快开启新世界～</span>
      <div class="login_btn" @click="loginFlag = true">登录</div>
    </div>
    <!-- 轻提示 -->
    <div class="showCode" v-if="codeFlag">获取验证码成功</div>
    <div class="showCode" v-if="teleFlag">请输入正确的手机号码</div>
    <div class="showCode" v-if="codeNull">验证码错误</div>
    <div class="showCode" v-if="passwordFlag">密码或者手机号不正确</div>
    <div class="showCode" v-if="successLogin">登录成功</div>
    <NavButton :active="1" />
  </div>

  <!-- 登陆完成后的界面 -->
  <div class="content" v-if="tokenValue">
    <h2 class="title">个人中心</h2>
    <!-- 个人信息 -->
    <div class="user_mess">
      <div class="img">
        <img
          src="https://img-static.mihoyo.com/communityweb/avatar/avatar7.png?x-oss-process=image/resize,m_lfit,w_140,h_140,limit_1/format,webp"
          alt=""
        />
      </div>
      <div class="user_right">
        <div class="username">独揽人间烟火</div>
        <div class="user_id">通行证ID: 257376584</div>
      </div>
    </div>

    <!-- 功能模块 -->
    <div class="function" style="margin-top: 10px" @click="goOrder('/order')">
      <div class="fun_item">
        <div class="left"><i class="iconfont icon-xiugaidingdan"></i><span>我的订单</span></div>
        <div class="right iconfont icon-youjiantou"></div>
      </div>
    </div>
    <div class="function">
      <div class="fun_item">
        <div class="left"><i class="iconfont icon-youhuiquan"></i><span>我的优惠券</span></div>
        <div class="right iconfont icon-youjiantou"></div>
      </div>
    </div>
    <div class="function">
      <div class="fun_item">
        <div class="left"><i class="iconfont icon-dingweixiao"></i><span>收货地址</span></div>
        <div class="right iconfont icon-youjiantou"></div>
      </div>
    </div>
    <div class="function">
      <div class="fun_item">
        <div class="left"><i class="iconfont icon-kefu"></i><span>联系客服</span></div>
        <div class="right iconfont icon-youjiantou"></div>
      </div>
    </div>
    <div class="function">
      <div class="fun_item">
        <div class="left">
          <i class="iconfont icon-fuwutiaokuan"></i><span>查看《服务条款》</span>
        </div>
        <div class="right iconfont icon-youjiantou"></div>
      </div>
    </div>
    <div class="function" style="margin-top: 10px" @click="outLoginFlag = true">
      <div class="fun_item" style="justify-content: center">
        <div class="left"><span>退出登录</span></div>
      </div>
    </div>
    <!-- 退出登录弹出框 -->
    <div class="outlogin" v-if="outLoginFlag">
      <div class="box">
        <h3>确认退出当前账户?</h3>
        <div class="btn">
          <div class="left" @click="outLoginFlag = false">取消</div>
          <div class="right" @click="outLogin">退出</div>
        </div>
      </div>
    </div>
  </div>

  <NavButton :active="2" />
</template>

<style scoped lang="scss">
// 请求登录界面
.box {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  .title {
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 18px;
    border-bottom: 1px solid #eee;
  }
  .content {
    width: 160px;
    height: 160px;
    position: absolute;
    top: 40%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    span {
      font-size: 14px;
      display: block;
      margin-top: 10px;
      color: #9696a1;
    }
    .login_btn {
      width: 80px;
      margin: 20px auto;
      text-align: center;
      padding: 10px;
      color: #fff;
      border-radius: 20px;
      background-color: #ff6d6d;
    }
  }
}

.login {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.6);
  .login_box {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 360px;
    border-radius: 20px;
    background-color: #fff;
  }
  .logo {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: auto;
    img {
      width: 100%;
    }
  }
  .cancel {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 10px;
    height: 10px;
    img {
      width: 100%;
    }
  }
}

// 退出登录弹出框
.outlogin {
  position: fixed;
  top: 0;
  width: 100vh;
  height: 100vh;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);
  .box {
    position: absolute;
    top: 50%;
    transform: translate(60px, -50%);
    width: 240px;
    height: 80px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px 15px;
    text-align: center;
    .btn {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      div {
        width: 100px;
        height: 35px;
        line-height: 35px;
        border-radius: 20px;
        font-size: 14px;
      }
      .left {
        color: #ff6d6d;
        margin-right: 10px;
        background-color: #ffe9e9;
      }
      .right {
        color: #fff;
        background-color: #ff6d6d;
      }
    }
  }
}
// 登陆完成后的界面
.content {
  .title {
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 18px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
  }
  // 个人信息
  .user_mess {
    display: flex;
    padding: 20px 15px;
    background-color: #fff;
    .img {
      width: 70px;
      height: 70px;
      // background-color: pink;
      margin-right: 10px;
      img {
        width: 100%;
        border-radius: 50%;
      }
    }
    .user_right {
      .username {
        font-size: 18px;
        padding-top: 10px;
        padding-bottom: 5px;
      }
      .user_id {
        font-size: 14px;
      }
    }
  }
  // 功能模块
  .function {
    padding: 15px;
    padding-bottom: 0;
    font-size: 14px;
    background-color: #fff;
    .fun_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20px;
      border-bottom: 1px solid #eee;
      .left {
        line-height: 18px;
        i {
          display: inline-block;
          width: 18px;
          height: 18px;
          margin-right: 5px;
        }
      }
      .right {
        width: 18px;
        height: 18px;
        line-height: 18px;
        font-size: 12px;
      }
    }
  }
}

// 验证码登录
.code_content,
.password_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  .tele {
    padding: 10px 12px;
    line-height: 18px;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    margin: 15px 0;
  }
  .code {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    line-height: 18px;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    input {
      border: 0;
      border-right: 1px solid #eee;
    }
    button {
      border: 0;
      outline: 0;
      background-color: transparent;
    }
  }
  .login_btn {
    line-height: 38px;
    margin: 15px 0;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background-color: #ff6d6d;
    border-radius: 20px;
  }
  .register {
    display: flex;
    justify-content: space-between;
    color: #7f858a;
    margin-bottom: 15px;
  }
  p {
    line-height: 18px;
    span {
      color: #7f858a;
      padding-left: 26px;
    }
  }
}

// 穿透
.login ::v-deep .van-tabs__line {
  width: 25px;
  background-color: #ff6d6d;
}
.login ::v-deep .van-tabs {
  margin-top: 20px;
}
.van-tabs ::v-deep .van-tabs__wrap {
  border-radius: 20px;
}

.showCode {
  position: fixed;
  bottom: 9%;
  left: 50%;
  padding: 10px;
  border-radius: 5px;
  transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: 99999;
}
</style>
